<template>
	<view class="">
		<view class="list-view">
			
			<template  v-for="item in dataList" :id="item.id">
				<!-- 标题 -->
				<view class="row-between list-title" :style="titleStyle ? titleStyle : {} " @click="toggleIndex(item.id)">
					<view>{{item.title}}</view>
					<uni-icons type="arrowup" v-if="toggleId == item.id && frequency == 0" size="18" color="rgb(240, 240, 240)"></uni-icons>
					<uni-icons type="arrowdown" v-else size="18" color="rgb(240, 240, 240)"></uni-icons>
				</view>	
				<!-- 内容列表 --> 
				<view class="list-content" v-if="toggleId == item.id">
					<HashCodeComponents :code="item.code" :titleStyle="hashTitleStyle" style="padding: 30upx 0upx;" ></HashCodeComponents>
					<!-- 信息列表 v-for="(item,index) in msgListData" :key="item.field+index">-->
					<view class="msg-list" v-for="(citem,index) in item.msgList" :key="citem.field+index">
						<view class="row-between list" style="align-items: flex-start;">
							<view>{{citem.field}}:</view>
							<image v-if="citem.image" :src="citem.image" mode=""></image>
							<view v-else-if ="citem.click" style="color: #FE5E49" @click.stop="lookClick(citem)">{{citem.click}}</view>
							<view v-else >{{citem.value}}</view>
						</view>
					</view>
				</view>
			</template>
			
		</view>
	</view>
</template>

<script>
	import HashCodeComponents from '../../pages/detail/productTraceability/components/hashCodeComponents.vue';
	export default {
		props:{
			titleStyle: {type: Object, default: () => new Object },
			dataList: {type: Array, default: () => new Array }
		},
		components:{HashCodeComponents},
		data() {
			return {
				hashTitleStyle: {fontSize: '26upx',fontFamily: 'PingFang SC',fontWeight: '500',color: '#999999'},
				toggleId: '',
				frequency: 0,
				msgListData:[
					{
						id: 1,
						title:'五常大米',
						msgList:[
							{field:'原材料名称',value:'五常大米'},
							{field:'生产日期',value:'2019.12.26'},
							{field:'保质期',value:'3个月'},
							{field:'进货日期',value:'2019.12.31'},
							{field:'进货量',value:'500kg'},
							{field:'检验人',value:'张三'},
							{field:'检验结果',value:'合格'},
							{field:'供应商名称',value:'五常大米贸易公司'},
							{field:'原料溯源',value:'常温存储',click:'点击查看'},
							{field:'原料图片',value:'常温存储',image:'/static/assets/dizhi.png'},
						]
					},
					{
						id: 2,
						title:'食用盐',
						msgList:[
							{field:'原材料名称',value:'五常大米'},
							{field:'生产日期',value:'2019.12.26'},
							{field:'保质期',value:'3个月'},
							{field:'进货日期',value:'2019.12.31'},
							{field:'进货量',value:'500kg'},
							{field:'检验人',value:'张三'},
							{field:'检验结果',value:'合格'},
							{field:'供应商名称',value:'五常大米贸易公司'},
							{field:'原料溯源',value:'常温存储',click:'点击查看'},
							{field:'原料图片',value:'常温存储',image:'/static/assets/dizhi.png'},
						]
					},
					{
						id: 3,
						title:'凝固剂',
						msgList:[
							{field:'原材料名称',value:'五常大米'},
							{field:'生产日期',value:'2019.12.26'},
							{field:'保质期',value:'3个月'},
							{field:'进货日期',value:'2019.12.31'},
							{field:'进货量',value:'500kg'},
							{field:'检验人',value:'张三'},
							{field:'检验结果',value:'合格'},
							{field:'供应商名称',value:'五常大米贸易公司'},
							{field:'原料溯源',value:'常温存储',click:'点击查看'},
							{field:'原料图片',value:'常温存储',image:'/static/assets/dizhi.png'},
						]
					},
					{
						id: 4,
						title:'微量元素',
						msgList:[
							{field:'原材料名称',value:'五常大米'},
							{field:'生产日期',value:'2019.12.26'},
							{field:'保质期',value:'3个月'},
							{field:'进货日期',value:'2019.12.31'},
							{field:'进货量',value:'500kg'},
							{field:'检验人',value:'张三'},
							{field:'检验结果',value:'合格'},
							{field:'供应商名称',value:'五常大米贸易公司'},
							{field:'原料溯源',value:'常温存储',click:'点击查看'},
							{field:'原料图片',value:'常温存储',image:'/static/assets/dizhi.png'},
						]
					},
					
				],
			};
		},
		methods:{
			lookClick(msgListData){
				msgListData.click? console.log("ok"):''
			},
			toggleIndex(str){
				this.toggleId == str ? (this.toggleId = '',this.frequency = 1) : (this.toggleId = str,this.frequency = 0)
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-view{
		background: #FFFFFF;
		box-shadow: 0upx 4upx 8upx 0upx rgba(86, 86, 86, 0.04);
		border-radius: 16upx;
	}
	/* 标题 */
	.list-title{
		padding: 38upx 30upx;
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666666;
		border-bottom: 1upx solid #EEEEEE;
	}
	/* 内容列表 */
	.list-content{
		padding: 0upx 50upx;
		border-bottom: 1upx solid #EEEEEE;
		.hashcode-text {
			flex: 1;
			font-size: 26upx;
			word-break: break-all;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE5E49;
			line-height: 42upx;
		}
		.copy-view {
			width: 90upx;
			height: 90upx;
			border: 1upx solid #EEEEEE;
			box-shadow: 0upx 3upx 8upx 0upx rgba(172, 170, 170, 0.1);
			border-radius: 45upx;
			font-size: 22upx;
			font-weight: 500;
			margin-left: 43upx;
			image {
				width: 30upx;
				height: 30upx;
				margin-bottom: 6upx;
			}
		}
		/* 信息列表 */
		.msg-list{
			padding: 0upx 30upx;
			.list{
				padding: 30upx 0upx;
				border-top: 1upx solid #EEEEEE;
				font-family: PingFang SC;
				font-size: 26upx;
				view:first-of-type {
					color: #999999;
					font-weight: 500;
					flex: 1;
				}
				view:last-of-type {
					color: #333333;
					font-weight: 500;
				}
				image {
					width: 140upx;
					height: 140upx;
				}
			}
			&:last-of-type .list{
				view:first-of-type {
					flex: none;
				}
			}
		}
	}
	
	.hash-title{
		padding: 30upx 0upx;
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}


</style>
